<template>
	<view class="pageBox">
		<view class="homeTopBox">
			<view class="topBG">
				<view class="homeTopBG">
					<image class="img" src="@/static/home/homeTop.png"></image>
					<!-- 	<imageSwiper class="img" :imgs="activityUrls" circular @imgClick="imgGoto($event,'configList')">
					</imageSwiper> -->
				</view>
				<!-- #ifdef MP -->
				<uni-nav-bar height="88rpx" title="" leftText="" color="#fff" :border="false" statusBar
					backgroundColor="transparent">
					<!-- <view class="navTitleBox">
						<view class="navTitle">共建共治共享</view>
					</view> -->
				</uni-nav-bar>
				<!-- #endif -->
			</view>
		</view>

		<view class="contentBox">
			<view class="contentBox-top">
				<view class="topGridBoxF">
					<view class="topGridBox">
						<view class="gridItem" v-for="(item,index) in topGrids" :key="index" @click="goto(item.url)">
							<image class="gridItem-img" :src="'/static/home/'+item.img"></image>
							<view class="gridItem-text">{{item.text}}</view>
						</view>
					</view>
				</view>
				<view class="homeTopBlockBox">
					<view class="homeTopBlock" @click="goto('common/notice/noticeList/noticeList')">
						<image class="img" src="../../static/home/homeTop1.png"></image>
					</view>
					<view class="homeTopBlock" @click="goto('activity/activity')">
						<image class="img" src="../../static/home/homeTop2.png"></image>
					</view>
				</view>
				<view class="u-notice-barBox" v-if="newsList.rows.length>0">
					
					<u-notice-bar bgColor="#fff" color="#000000" :text="[newsList.rows[0].noticeTitle]"
						direction="column" mode="link" speed="20"
						@click="goto('common/notice/noticeInfo/noticeInfo',{id:newsList.rows[0].noticeId})">
						<template #icon>
							<image src="@/static/home/notice.png" style="width: 36rpx; height: 36rpx; margin-right: 12rpx; margin-top: 4rpx;"></image>
							<view class="informationStatus">热门资讯:</view>
						</template>	
					</u-notice-bar>
				</view>
			</view>
			<view class="informationBox">
				<view class="titleRow">
					<view class="titleRow-left">
						<!-- <image class="titleRow-left-img" src="@/static/home/titleBox1.png"></image> -->
						<view>
							<text class="title">社区资讯</text>
						</view>
					</view>
					<view class="titleRow-right">
						<view class="moreText" @click="goto('common/notice/noticeList/noticeList')">查看更多
							<uni-icons type="right" color="#999999" size="28rpx"></uni-icons>
						</view>
					</view>
				</view>
				<view class="informationItemBox">
					<view class="informationItem" v-for="(item,index) in newsList.rows" :key="index"
						@click="goto('common/notice/noticeInfo/noticeInfo',{id:item.noticeId})">
						<view class="informationItem-right">
							<image class="informationItem-img" :src="$setImgUrl(item.picture)"></image>
						</view>
						<view class="informationItem-left">
							<view class="informationItem-title">
								<view class="u-line-3">
									{{item.noticeTitle}}
								</view>
							</view>
							<view class="informationTimeText">
								{{item.createTime}}
							</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 			<view class="informationBox">
				<view class="titleRow">
					<view class="titleRow-left">
						<image class="titleRow-left-img" src="@/static/home/titleBox2.png"></image>
						<view>
							<text class="title">活动</text>
							<view class="enText">Volunteer activities</view>
						</view>
					</view>
					<view class="titleRow-right">
						<view class="moreText" @click="goto('activity/activity')">更多</view>
					</view>
				</view>
				<view class="informationItemBox">
					<template v-for="(item,index) in activityList.rows">
						<view class="informationItem" v-if="index<1" :key="index"
							@click="goto('activity/activityInfo/activityInfo',{id:item.activityId})">
							<view class="informationItem-right">
								<image class="informationItem-img" :src="$setImgUrl(item.activityFile)"></image>
							</view>
							<view class="informationItem-left">
								<view class="informationItem-title">
									<view class="u-line-3">
										{{item.activityName}}
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
			</view> -->

		</view>
		<tabBar selectedIndex=0></tabBar>
		<u-popup :show="QRCodeShow" mode="center" :round="10" @close="QRCodeShow=false">
			<view class="couponInfoBox">
				<view class="couponName">人才码</view>
				<view class="couponQRCodeBox">
					<uqrcode class="QRCode" ref="uqrcode" sizeUnit="rpx" size="330" canvas-id="qrcode" value="人才码"
						:options="{ margin: 10 }">
					</uqrcode>
				</view>
			</view>
		</u-popup>
		<!-- <myTabBar nowIndex="index/index"></myTabBar> -->
		<u-picker :show="show" :columns="[dictList.residence_area]" keyName="label" @confirm=" confirm" @close="close"
			@cancel="close"></u-picker>
		<u-modal :show="rzShow" title="提示" content="请先提交认证申请成为人才!" confirmText="去提交" showCancelButton cancelText="取消"
			@confirm="toRZ" @close="RZX" @cancel="RZX"></u-modal>
	</view>
</template>

<script>
	import * as activityApi from "@/api/activity.js"
	import * as systemApi from "@/api/system.js"
	import * as carouselApi from "@/api/carousel.js"
	import {
		hasServePermission
	} from "@/api/autth"
	import {
		isExternal
	} from "@/utils/verify.js"
	import {
		commodityListAsc,
		commodityList
	} from "@/api/goods.js"
	import config from "@/core/config.js"
	// #ifdef H5
	var wx = require('jweixin-module')
	// #endif
	import {
		getWxSign
	} from "@/api/login.js"
	import {
		noticeList
	} from "@/api/notice.js"
	export default {
		components: {},
		data() {
			return {
				navBG: 'transparent',
				rzShow: false,
				area: '鳌江',
				QRCodeShow: false,
				sexs: ['男', '女', '未知'],
				eliteInfo: null,
				userInfo: {
					userName: '',
					userType: '',
					roles: [{
						roleName: '',
						roleId: '',
						roleKey: ''
					}],
					avatar: '',
					nickName: '',
					sex: 2
				},
				todayGoodsList: [],
				newGoodsList: [],
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				show: false,
				topGrids: [{
					img: 'topGrid0.png',
					text: '资讯',
					url: 'common/notice/noticeList/noticeList'
				}, {
					img: 'topGrid1.png',
					text: '活动',
					url: 'activity/activity'
				}, {
					img: 'topGrid2.png',
					text: '商城',
					url: 'integral/integral'
				}, ],
				columns: [
					['鳌江', '昆阳', '龙港', '麻布']
				],
				configList: [],
				activityUrls: [],
				activityUrls1: [],
				activityList: {
					pageSize: 10,
					pageNum: 1,
					rows: []
				},
				newsList: {
					pageSize: 5,
					pageNum: 1,
					rows: []
				},
				policyList: {
					pageSize: 10,
					pageNum: 1,
					rows: []
				},
				dicts: {
					policy: {},
					residence_area: {},
					elite_type: {}
				},
				dictList: {
					policy: [],
					residence_area: [],
					elite_type: []
				},
			}
		},
		onLoad() {
			this.getHomeData()
			// this.getDictDataList('policy')
			this.getDictDataList('residence_area').then((res) => {
				this.area = res.rows[0].dictLabel
			})
			this.getDictDataList('elite_type')
			this.getGoodsList()
		},
		onShow() {
			const that = this
			this.$store.commit('clearStorage')
			//⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
			uni.hideTabBar({
				animation: false
			})
			this.userInfo = this.$store.getters.my_userInfo
			this.eliteInfo = this.$store.getters.eliteInfo
			if (!this.userInfo || !this.eliteInfo) {
				that.$store.dispatch('userBaseInfo').then(res => {
					that.userInfo = res.user
					that.eliteInfo = res.eliteInfo
				})
			}
		},
		methods: {
			getGoodsList() {
				commodityList({
					pageSize: 4,
					pageNum: 1,
					isRecommend: 'Y'
				}).then(res => {
					console.log(res);
					this.todayGoodsList = res.rows
				})
				commodityListAsc({
					pageSize: 1,
					pageNum: 1,
				}).then(res => {
					console.log(res);
					this.newGoodsList = res.rows
				})
			},
			setImg(url) {
				if (isExternal(url)) {
					return url
				} else {
					return config.baseUrl + '/dev-api' + url
				}
			},
			toRZ() {
				uni.$u.debounce(() => {
					this.$navTo(`pages/common/authentication/authentication`)
					this.rzShow = false
				}, 500)
			},
			RZX() {
				this.rzShow = false
			},
			scanCode() {
				let that = this //如果要把扫码结果赋值给页面定义变量，要使用that.变量名
				// #ifdef H5
				getWxSign().then(({
					data
				}) => {
					wx.config({
						debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
						appId: 'wx9b3a37b82826ea43', // 必填，公众号的唯一标识
						timestamp: data.timestamp, // 必填，生成签名的时间戳
						nonceStr: data.nonceStr, // 必填，生成签名的随机串
						signature: data.signature, // 必填，签名
						jsApiList: ['checkJsApi', 'startRecord', 'stopRecord', 'translateVoice',
							'scanQRCode', 'openCard'
						] // 必填，需要使用的 JS 接口列表
					})
					wx.ready(() => {
						wx.scanQRCode({
							needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， 
							scanType: ['qrCode'], // 可以指定扫二维码还是一维码，默认二者都有
							success: function(res) {
								var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
								if (res.resultStr.indexOf(',') > 0) {
									//条形码时返回的格式类似为【code128,123456789】        
									var dealserialNumber = res.resultStr.split(',')[1]
									dealserialNumber = dealserialNumber.replace(/[^a-z\d]/ig,
										'') //处理条形码扫描的字符
									// alert(dealserialNumber);
									//location.href='接收结果页面='+dealserialNumber;//扫描结果传递到的处理页面
								} else {
									//二维码时
									// alert(res.resultStr);
									//location.href='接收结果页面='+res.resultStr;//扫描结果传递到的处理页面
								}
								console.log(res);
							}
						})
					})
				})
				// #endif
			},

			goto1(url, serveId) {
				hasServePermission(serveId).then(res => {
					if (res.data) {
						this.$navTo(`pages/${url}`)
					}
				}).catch(err => {
					if (!err.data && this.userInfo.userType == 'yk') {
						this.rzShow = true
					} else {
						this.$toast('无权限')
					}
				})
			},
			imgGoto(index, arrName) {
				const url = this.configList[index].type == 2 ? 'pages/activity/activityInfo/activityInfo' :
					'pages/common/notice/noticeInfo/noticeInfo'
				this.$navTo(url, {
					id: this.configList[index].contentId
				})
			},
			goto2(index, url) {
				const id = this.activityList.rows[index].activityId
				this.$navTo(`pages/${url}`, {
					id
				})
				console.log(e, url);
			},
			goto(url, data) {
				if (url == 'my/serve/rideHailing/rideHailing') {
					this.goto1(url, 0)
				} else {
					this.$navTo(`pages/${url}`, data)
					// console.log(`pages/${url}`, data);
					// uni.navigateTo({
					// 	url: `/pages/${url}`,
					// 	fail(e) {
					// 		console.log(e);
					// 	}
					// })
				}
				// if (this.userInfo.userType == 'yk') {
				// 	this.rzShow = true
				// } else {
				// this.$navTo(`pages/${url}`, data)
				// }

			},
			getDictDataList(dictType) {
				return new Promise((resolve, reject) => {
					systemApi.dictDataList(dictType).then(({
						rows
					}) => {
						let objs = {}
						let keyValues = []
						rows.forEach((item) => {
							objs[item.dictValue] = {
								label: item.dictLabel,
								color: `rgb(${item.remark||'57,137,248'})`,
								background: `rgba(${item.remark||'57,137,248'},0.1)`
							}
							keyValues.push({
								label: item.dictLabel,
								text: item.dictLabel,
								value: item.dictValue
							})
						})
						this.dicts[dictType] = objs
						this.dictList[dictType] = keyValues
						resolve({
							objs,
							keyValues,
							rows
						})
					}).catch(reject)
				})
			},
			getHomeData() {
				this.getActivityList()
				this.getNewsList()
				// this.getCarouselList()
			},
			getNewsList() {
				const page = {
					pageSize: this.newsList.pageSize,
					pageNum: this.newsList.pageNum,
				}
				noticeList(page).then(({
					rows
				}) => {
					this.newsList.rows = rows
				})
			},
			getCarouselList() {
				const page = {
					pageSize: 5,
					pageNum: 1,
				}
				carouselApi.configList(page).then(({
					rows
				}) => {
					this.configList = rows
					const urls = rows.map(item => item.imageUrl)
					this.activityUrls = urls
				})
			},
			getActivityList() {
				const page = {
					pageSize: 5,
					pageNum: 1,
				}
				activityApi.activityList(page).then(({
					rows
				}) => {
					this.activityList.rows = rows
					const urls = rows.map(item => item.activityFile)
					this.activityUrls1 = urls
				})
			},
			confirm(e) {
				console.log('confirm', e)
				this.area = e.value[0].label
				this.show = false
			},
			close() {
				this.show = false
			},
			changeIndex(index) {
				this.nowIndex = index
			},

		},
		onPageScroll({
			scrollTop
		}) {
			if (scrollTop > 10) {
				this.navBG = "linear-gradient(90deg, #6FA9FF 100%, #6FA9FF 81%)"
				// this.navBG = "#fff"
			} else {
				this.navBG = "transparent"
			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F7FF;
	}
</style>
<style lang="scss" scoped>
	@import "@/utils/viewScss/informationItem.scss";

	.informationItemBox {
		padding-top: 26rpx;

		// .informationItem {
		// 	margin-bottom: 0;
		// }
	}

	.couponInfoBox {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		padding: 40rpx;
		text-align: center;

		.couponName {
			font-size: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #0138D2;
		}

		.couponQRCodeBox {
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;

			.QRCode {
				width: 330rpx;
				height: 330rpx;
				object-fit: cover;
			}

		}

		.storefrontName {
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #000000;
			margin-bottom: 40rpx;
		}

		.couponEndTime {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #666666;
		}

	}


	.pageBox {
		padding-bottom: 20rpx;
		background-color: #F5F7FF;

		.navLeft {
			display: flex;
			align-items: center;

		}

		.navLeftText {
			font-size: 40rpx;
			font-family: PangMenZhengDao, PangMenZhengDao;
			font-weight: 400;
			color: #FFFFFF;
		}

		.areaText {
			margin-left: 10rpx;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.homeTopBox {
			.topBG {
				width: 100%;
				position: relative;
				min-height: 460rpx;

				.navTitleBox {
					width: 100%;
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.navTitle {
						color: #333;
						font-size: 30rpx;
					}

					.navEn {
						font-size: 20rpx;
						color: #fff;
					}
				}

				// .navEn {
				// 	width: 100%;
				// 	font-size: 20rpx;
				// 	color: #fff;
				// 	position: absolute;
				// 	top: 80rpx;
				// 	left: 0;
				// 	z-index: 3;
				// 	text-align: center;

				// }

				.homeTopBG {
					flex-shrink: 0;
					top: 0;
					left: 0;
					position: absolute;
					width: 100%;
					// height: 486rpx;
					height: 480rpx;
					// background: linear-gradient(to right, #6FA9FF, #6FA9FF);
					object-fit: cover;

					.img {
						width: 100%;
						height: 100%;
					}
				}
			}
		}


		.contentBox {
			box-sizing: border-box;

			// margin-top: 30rpx;
			.contentBox-top {
				background-color: #fff;
				padding-bottom: 40rpx;
				margin-bottom: 24rpx;

				.u-notice-barBox {
					padding: 0 30rpx;
					margin-top: 24rpx;
					// margin-bottom: 40rpx;

					.u-notice-bar {
						width: 100%;
						padding: 0;

					}
				}

				::v-deep .u-notice__swiper {
					padding: 6rpx 0;

				}

				::v-deep .uicon-arrow-right {
					font-size: 28rpx !important;

				}

				.homeTopBlockBox {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 0 30rpx;
					box-sizing: border-box;

					.homeTopBlockX {
						width: 30rpx;
						height: 100%;
						flex-shrink: 0;
					}

					.homeTopBlock {
						height: 180rpx;
						width: calc(50% - 15rpx);

						.img {
							width: 100%;
							height: 100%;
						}
					}
				}

				.informationStatus {
					background: #FFFFFF;
					border-radius: 8rpx;
					// border: 2rpx solid #E22A1B;
					font-family: PangMenZhengDao, PangMenZhengDao;
					// font-weight: bold;
					font-size: 28rpx;
					// color: #E22A1B;
					padding: 6rpx;
					margin-right: 20rpx;
				}
			}

			.topGridBoxF {
				position: relative;
				margin-bottom: 40rpx;
				padding: 0 30rpx;

				.topGridBox {
					display: flex;
					background-color: #fff;
					width: 100%;
					height: 198rpx;
					border-radius: 40rpx;
					position: relative;
					z-index: 1;
					align-items: center;
					box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
					margin-top: -100rpx;
					.gridItem {
						width: 33.333%;
						text-align: center;

						.gridItem-img {
							width: 100rpx;
							height: 100rpx;
							margin-bottom: 6rpx;
						}

						.gridItem-text {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
						}
					}
				}
			}

		}

		.QABox {
			width: 100%;
			height: 320rpx;
			box-sizing: border-box;
			background-color: transparent;
			position: relative;
			z-index: 2;
			margin-bottom: 20rpx;

			.swiperBox {
				width: 100%;
				height: 300rpx;
				border-radius: 15rpx;
				overflow: hidden;
				background-color: #F5F7FF;

				::v-deep .uni-swiper-slides {
					// width: 60%;
					background-color: #F5F7FF;

					.u-swiper__wrapper__item {
						background-color: #F5F7FF;
					}
				}

				.swiperBox-item {
					width: 100%;
					// height: 400rpx;
				}
			}
		}


		.informationBox {
			// margin-top: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: #fff;

			.titleRow {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;

				.titleRow-left {
					display: flex;
					align-items: center;

					.enText {
						font-size: 20rpx;
					}

					.titleRow-left-img {
						width: 40rpx;
						height: 40rpx;
						object-fit: cover;
						margin-right: 10rpx;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 40rpx;
						color: #000000;
					}
				}

				.titleRow-right {
					flex-shrink: 0;
					margin-left: 10rpx;

					.moreText {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.titleRow-right-img {}
				}
			}

		}

	}
</style>